import React, { useCallback, useEffect, useState } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import { useSelector,useDispatch } from'react-redux'

import NavBar from '@/components/navBar/NavBar'
import Button from '@/components/button/Button'
import Cell from '@/components/cell/Cell'
import Icon from '@/components/icon/Icon'

import {loadDataSaga,addDoctorTeam} from './store/actionCreator'
import {ApplyWrapper} from './styledApply'
import UserInfo from './applyUi/UserInfo'

export default function Apply() {
    const [teamid , setteamid] = useState()
    const [checked, setChecked] =useState(false)
    const dispath = useDispatch()
    const user = useSelector(state => {
        return state.getIn(['Apply','user'])
    })
    console.log(user);
    //加载数据
    useEffect(() => {
        (async () => {
            await dispath(loadDataSaga())
        })()
    },[dispath])

    const location = useLocation()
    useEffect(() => {
        let id = location.pathname.split('/').pop()
        setteamid(id)
    },[location,setteamid])

    //返回上一级
    const history = useHistory()
    const back = useCallback(() => {
        history.goBack()
    },[history])

    const changeChecked = useCallback(() => {
        setChecked(!checked)
    },[setChecked,checked])

    const setapply = useCallback(() =>{
        if(checked){
            dispath(addDoctorTeam({
                'doctorTeamid':teamid,
                'userid':user.id
            }))
        }
    },[checked,dispath,teamid,user]) 
    return (
        <ApplyWrapper>
            <NavBar
            title = '申请签约'
            leftArrow
            clickLeft = {back}
            ></NavBar>
            <UserInfo
            data = {user}
            ></UserInfo>
            <div className='list'>
                <Cell
                title = '签约机构'
                value = '洛西社区卫生服务站'
                border
                ></Cell>
                <Cell
                title = '签约团队'
                value = '李明明团队'
                leftArrow
                border
                ></Cell>
                <Cell
                title = '签约医生'
                value = '李明明'
                leftArrow
                border
                ></Cell>
                <Cell
                title = '服务包'
                value = '老人服务包'
                leftArrow
                border
                ></Cell>
                <Cell
                title = '签约周期'
                value = '1年'
                border
                ></Cell>
                <Cell
                title = '费用'
                value = '￥120'
                border
                ></Cell>
            </div>
            <div className='bottom'>
                <div className='check' onClick={changeChecked}>
                    {
                        checked && (
                            <Icon
                    name='checkboxCircleFill'
                    color='#2984F8'
                    size='.22rem'
                    ></Icon>
                        )
                    }
                    
                </div>
                <span>我已阅读并同意<a>《家庭医生签约协议》</a></span>
            </div>
            <Button
            size = 'large'
            text = '提交申请'
            click ={setapply}
            ></Button>
        </ApplyWrapper>
    )
}
